<template>
  <div
    :class="wrapClasses"
    v-outside.capture="() => visible = true" >
    <header
      :class="classes"
      @click="clickHeader" >
      <ul class="header-ul" v-if="filterable">
        <li>
          <input
            class="header-input"
            :placeholder="placeholder"
            @focus="onFocus" >
        </li>
      </ul>
      <ul class="header-ul" v-else>
        <li v-if="selectLabel.length < 1" class="placeholder">{{placeholder}}</li>
        <li v-else class="header-inner">{{renderFormat(selectLabel, selectData)}}</li>
      </ul>
      <span :class="['right-icon', !visible ? 'rotate180-enter' : 'rotate180-leave']">
        <Icon type="icon-down" />
      </span>
    </header>
    <transition name="transition-drop">
      <div class="sh-select-body" v-show="!visible">
        <Caspanel
          :visible="visible"
          :defaultValue="selectLabel"
          :dataArr="data"
          :trigger='trigger'
          :noDataText="noDataText"
          @on-select="selectNode" />
      </div>
    </transition>
  </div>
</template>

<script>
import Caspanel from './Caspanel'
import outside from '../../../directives/clickoutside'
import { oneOf } from '../../../utils/assist'
import Emitter from '../../../mixins/emitter'
import size from '../../../mixins/size'
export default {
  name: 'CascaderEasy',
  components: {
    Caspanel
  },
  mixins: [ Emitter, size ],
  directives: { outside },
  props: {
    value: {
      type: Array,
      default: function () {
        return []
      }
    },
    data: {
      type: Array,
      default: []
    },
    noDataText: {
      type: [String, Number],
      default: '暂无数据'
    },
    placeholder: {
      type: [String, Number],
      default: '请选择'
    },
    trigger: {
      type: String,
      default: 'hover',
      validator (value) {
        return oneOf(value, ['click', 'hover'])
      }
    },
    filterable: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    renderFormat: {
      type: Function,
      default: (label) => {
        return label.join(' / ')
      }
    }
  },
  data () {
    return {
      visible: true,
      selectLabel: this.value, // 选中label集合
      selectData: [] // 选中节点结合(父节点不包含children)
    }
  },
  computed: {
    wrapClasses () {
      return [
        'sh-select',
        'sh-cascader',
        {
          [`sh-cascader-${this.sizes}`]: !!this.sizes
        }
      ]
    },
    classes () {
      return [
        'sh-select-header',
        {
          'sh-select-header-focus': !this.visible,
          'sh-select-header-disabled': this.disabled
        }
      ]
    }
  },
  watch: {
    value: {
      deep: true,
      handler: function (val) {
        this.selectLabel = val
      }
    }
  },
  methods: {
    clickHeader () {
      if (!this.disabled && !this.filterable) {
        this.visible = !this.visible
      }
    },
    onFocus () {
      this.visible = false
    },
    selectNode ({ label, select }) {
      this.selectData = select
      this.selectLabel = label
      this.$emit('input', label)
      this.visible = true
      this.$emit('on-change', label, select)
      this.dispatch('FormItem', 'on-form-change', label)
    }
  }
}
</script>
